<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2024-02-27 12:04:25
 * @LastEditors: htang
 * @LastEditTime: 2024-03-05 11:21:27
-->
<template>
  <a-select
    v-model:value="state"
    @change="handleChange"
    :showSearch="true"
    optionFilterProp="label"
    allowClear
    placeholder="请选择站点编码"
    :disabled="disabled"
  >
    <a-select-option value="">请选择</a-select-option>
    <template v-for="(vo, idx) in stationList" :key="idx">
      <a-select-option :value="vo.stationCode" :label="vo.name">
        {{ vo.name }}
      </a-select-option>
    </template>
  </a-select>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from 'vue';
import { useUserStore } from '/@/store/modules/user';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { propTypes } from '/@/utils/propTypes';
import { stationListApi } from '/@/api/station/index';
export default defineComponent({
  props: {
    value: propTypes.oneOfType([propTypes.string]),
    disabled: propTypes.bool,
  },
  emits: ['options-change', 'change'],
  setup(props, { emit }) {
    const userStore = useUserStore();

    let stationList = ref([]);

    let vModalValue: any;

    const emitData = ref<any[]>([]);

    const [state] = useRuleFormItem(props, 'value', 'change', emitData);

    function init() {
      initStation();
      // stationList.value = userStore.getStationList;
    }

    function handleChange(_, ...args) {
      vModalValue && vModalValue(_);
      emitData.value = args;
      emit('update:value', state.value);
    }

    function initStation() {
      stationListApi({}).then((res: any) => {
        stationList.value = res;
      });
    }

    onMounted(() => {
      init();
    });

    return {
      state,
      stationList,
      handleChange,
    };
  },
});
</script>